<template>
	<el-drawer
		v-model="dialogVisible"
		:destroy-on-close="true"
		size="80%"
		class="waybill-detail-drawer"
	>
		<template #header>
			<div class="drawer-header">
				<div class="title">运单详情</div>
				<div class="waybill-no">
					<el-tag size="large">{{ detail.waybillNo }}</el-tag>
				</div>
			</div>
		</template>

		<div class="waybill-detail">
			<!-- 货物信息 -->
			<div class="detail-section">
				<div class="section-title">货物信息</div>
				<BasicTable
					:data="detail.goodsList"
					:option="goodsTableColumns"
					:summary-method="getSummaries"
					show-summary
				></BasicTable>
			</div>

			<!-- 运单基础信息 -->
			<div class="detail-section">
				<div class="section-title">运单基础信息</div>
				<el-descriptions :column="3" border>
					<el-descriptions-item label="运单号">
						<el-link type="primary" :underline="false">{{
							detail.waybillNo
						}}</el-link>
					</el-descriptions-item>
					<el-descriptions-item label="始发地">
						{{ detail.origin }}
					</el-descriptions-item>
					<el-descriptions-item label="目的地">
						{{ detail.destination }}
					</el-descriptions-item>
					<el-descriptions-item label="运距">
						{{ detail.distance ? detail.distance + 'km' : '-' }}
					</el-descriptions-item>
					<el-descriptions-item label="计划发车时间">
						{{ detail.planDepartTime }}
					</el-descriptions-item>
					<el-descriptions-item label="计划到达时间">
						{{ detail.planArriveTime }}
					</el-descriptions-item>

					<el-descriptions-item label="计费方式">
						{{ detail.chargeType }}
					</el-descriptions-item>
					<el-descriptions-item label="运费总计"
						>{{ detail.totalFee }} 元</el-descriptions-item
					>
				</el-descriptions>
			</div>

			<!-- 拉运车辆信息 -->
			<div class="detail-section">
				<div class="section-title">拉运车辆信息</div>
				<el-descriptions :column="3" border>
					<el-descriptions-item label="运企名称">
						{{ detail.company }}
					</el-descriptions-item>
					<el-descriptions-item label="司机姓名">
						{{ detail.driver }}
					</el-descriptions-item>
					<el-descriptions-item label="联系电话">
						{{ detail.phone }}
					</el-descriptions-item>
					<el-descriptions-item label="车牌号">
						{{ detail.plateNo }}
					</el-descriptions-item>
				</el-descriptions>
			</div>

			<!-- 物流跟踪信息 -->
			<div class="detail-section">
				<div class="section-title">物流跟踪信息</div>
				<el-timeline>
					<el-timeline-item
						v-for="(activity, index) in detail.logisticsList"
						:key="index"
						:type="getLogisticType(activity.status)"
						:color="getLogisticColor(activity.status)"
						:timestamp="activity.operateTime"
					>
						<div class="timeline-content">
							<div class="status">{{ activity.status }}</div>
							<div class="operator">操作人：{{ activity.operator }}</div>
							<div v-if="activity.remark" class="remark">
								{{ activity.remark }}
							</div>
						</div>
					</el-timeline-item>
				</el-timeline>
			</div>

			<!-- 异常信息 -->
			<div class="detail-section" v-if="detail.exceptionInfo">
				<div class="section-title">异常信息</div>
				<el-alert
					type="warning"
					:title="detail.exceptionInfo.title"
					:description="detail.exceptionInfo.description"
					show-icon
					:closable="false"
				/>
			</div>

			<!-- 操作日志 -->
			<!--  <div class="detail-section">
        <div class="section-title">操作日志</div>
        <div class="log-list">
          <div v-for="(log, index) in detail.operationLogs" :key="index" class="log-item">
            <div :class="['log-icon', getLogIconClass(log.type)]">
              <el-icon><component :is="getLogIcon(log.type)" /></el-icon>
            </div>
            <div class="log-content">
              <div class="log-header">
                <span class="operator">{{ log.operator }}</span>
                <span class="time">{{ log.operateTime }}</span>
              </div>
              <div class="log-desc">{{ log.type }}{{ log.content ? `: ${log.content}` : "" }}</div>
              <div v-if="log.remark" class="log-remark">{{ log.remark }}</div>
            </div>
          </div>
        </div>
      </div>-->
		</div>
	</el-drawer>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import {
	Check,
	TakeawayBox,
	Document,
	Edit,
	CircleClose,
	Warning,
	Van,
	Box,
} from '@element-plus/icons-vue';
import { ElMessageBox } from 'element-plus';

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
	detailData: {
		type: Object,
		default: () => ({}),
	},
});

const emit = defineEmits([
	'update:modelValue',
	'edit',
	'cancel',
	'editException',
]);

const dialogVisible = ref(false);
const detail = ref({
	waybillNo: 'YD202505010001',
	origin: '成都',
	destination: '重庆（璧山）',
	company: 'XXXX运输有限公司',
	driver: '张三',
	phone: '135XXXXXXXX',
	plateNo: '川A00515D',
	chargeType: '单趟计费',
	totalFee: 300,
	planDepartTime: '2025-5-1 7:00:00',
	planArriveTime: '2025-5-2 20:00:00',
	// 运距 单位：km
	distance: 1000,
	actualDepartTime: '',
	actualArriveTime: '',
	creator: '管理员',
	createTime: '2025-4-30 18:30:11',
	status: '待接单',
	goodsList: [
		{
			name: '机制砂',
			quantity: 200,
			unit: '吨',
			totalCost: 300,
		},
	],
	// 物流跟踪信息
	logisticsList: [
		{
			status: '已创建',
			operator: 'XXX',
			operateTime: '2025-5-1 10:22:20',
			remark: '',
		},
		{
			status: '待接单',
			operator: 'XXX',
			operateTime: '2025-5-1 10:22:20',
			remark: '',
		},
	],
	// 异常信息
	exceptionInfo: null,
	// 操作日志
	operationLogs: [
		{
			type: '创建运单',
			operator: 'XXX',
			content: '',
			operateTime: '2025-5-1 10:22:20',
			remark: '',
		},
		{
			type: '调度',
			operator: 'XXX',
			content: '调度至XXXX运输有限公司, 司机: 张三, 车牌号: 川A00515D',
			operateTime: '2025-5-1 18:22:20',
			remark: '',
		},
	],
});

// 货物表格列配置
const goodsTableColumns = computed(() => ({
	index: true,
	hiddenPage: true,
	menu: false,
	column: [
		{ label: '货物名称', prop: 'name' },
		{ label: '数量', prop: 'quantity' },
		{ label: '单位', prop: 'unit' },
		{ label: '费用/元', prop: 'totalCost' },
	],
}));

// 获取物流状态类型
const getLogisticType = (status) => {
	const statusMap = {
		已创建: '',
		待接单: 'warning',
		待提货: 'warning',
		运输中: 'primary',
		已签收: 'success',
		已完成: 'success',
		已取消: 'info',
		已拒绝: 'danger',
		异常: 'danger',
	};
	return statusMap[status] || '';
};

// 获取物流状态颜色
const getLogisticColor = (status) => {
	const colorMap = {
		已创建: '#909399',
		待接单: '#E6A23C',
		待提货: '#E6A23C',
		运输中: '#409EFF',
		已签收: '#67C23A',
		已完成: '#67C23A',
		已取消: '#909399',
		已拒绝: '#F56C6C',
		异常: '#F56C6C',
	};
	return colorMap[status] || '#909399';
};

// 获取日志图标
const getLogIcon = (type) => {
	const iconMap = {
		创建运单: Document,
		编辑: Edit,
		调度: TakeawayBox,
		接单: Check,
		提货: Box,
		运输: Van,
		签收: Check,
		完成: Check,
		取消: CircleClose,
		拒绝: CircleClose,
		异常: Warning,
		异常修改: Edit,
	};
	return iconMap[type] || Document;
};
// 合计
function getSummaries(param: BasicTableNameSpace.SummaryMethodProps) {
	const { columns, data } = param;
	const sums: any = [];
	columns.forEach((column, index) => {
		if (index === 0) {
			sums[index] = '合计';
			return;
		}
		const values = data.map((item: any) => Number(item[column.property]));
		if (!values.some((value) => Number.isNaN(value))) {
			sums[index] = `${values.reduce((prev, curr) => {
				return !Number.isNaN(Number(curr)) ? prev + curr : prev;
			}, 0)}`;
			sums[index] = Number(sums[index]).toFixed(2);
		} else {
			sums[index] = '-';
		}
	});

	return sums;
}
// 获取日志图标样式
const getLogIconClass = (type) => {
	const classMap = {
		创建运单: 'create',
		编辑: 'edit',
		调度: 'dispatch',
		接单: 'accept',
		提货: 'pickup',
		运输: 'transport',
		签收: 'sign',
		完成: 'complete',
		取消: 'delete',
		拒绝: 'delete',
		异常: 'exception',
		异常修改: 'edit',
	};
	return classMap[type] || 'default';
};

// 为了兼容默认导出，定义组件名称
defineOptions({
	name: 'WaybillDetail',
});
function open(data: any) {
	// detail.value = data;
	dialogVisible.value = true;
}
defineExpose({
	open,
});
</script>

<style lang="scss" scoped>
.waybill-detail-drawer {
	:deep(.el-drawer__header) {
		margin-bottom: 0;
		padding: 16px 20px;
		border-bottom: 1px solid var(--el-border-color-lighter);
	}

	:deep(.el-drawer__body) {
		padding: 0;
		overflow: auto;
	}

	:deep(.el-drawer__footer) {
		padding: 16px 20px;
		border-top: 1px solid var(--el-border-color-lighter);
	}
}

.drawer-header {
	display: flex;
	align-items: center;
	gap: 16px;

	.title {
		font-size: 16px;
		font-weight: 500;
		color: var(--el-text-color-primary);
	}

	.waybill-no {
		.el-tag {
			font-weight: 500;
		}
	}
}

.waybill-detail {
	padding: 20px;

	.detail-section {
		margin-bottom: 32px;

		&:last-child {
			margin-bottom: 0;
		}

		.section-title {
			font-size: 15px;
			font-weight: 500;
			margin-bottom: 16px;
			padding: 10px 16px;
			background-color: var(--el-fill-color-light);
			border-radius: 4px;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 4px;
				height: 16px;
				background-color: var(--el-color-primary);
				border-radius: 0 2px 2px 0;
			}
		}
	}

	:deep(.el-descriptions) {
		.el-descriptions__header {
			display: none;
		}

		.el-descriptions__label {
			width: 120px;
			justify-content: flex-end;
			padding: 12px 16px;
			background-color: var(--el-fill-color-light);
			font-weight: normal;
		}

		.el-descriptions__content {
			padding: 12px 16px;
		}
	}

	.total-calculation {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 10px 20px;
		background-color: var(--el-fill-color-light);
		border: 1px solid var(--el-border-color);
		border-top: none;
		border-radius: 0 0 4px 4px;
		font-weight: 500;

		.money {
			color: var(--el-color-danger);
			margin-left: 8px;
		}
	}

	:deep(.el-timeline) {
		padding: 16px;
		border: 1px solid var(--el-border-color-lighter);
		border-radius: 4px;
		background-color: var(--el-fill-color-blank);

		.el-timeline-item {
			padding-bottom: 20px;

			&:last-child {
				padding-bottom: 0;
			}

			.el-timeline-item__timestamp {
				color: var(--el-text-color-secondary);
				margin-top: 8px;
			}
		}
	}

	.timeline-content {
		padding: 8px 0;

		.status {
			font-weight: 500;
			font-size: 15px;
			margin-bottom: 4px;
		}

		.operator,
		.remark {
			color: var(--el-text-color-secondary);
			font-size: 13px;
		}

		.remark {
			margin-top: 4px;
		}
	}

	// 操作日志样式
	.log-list {
		.log-item {
			display: flex;
			padding: 16px 0;
			border-bottom: 1px solid var(--el-border-color-lighter);

			&:last-child {
				border-bottom: none;
				padding-bottom: 0;
			}

			&:first-child {
				padding-top: 0;
			}

			.log-icon {
				width: 32px;
				height: 32px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 16px;
				flex-shrink: 0;

				&.create {
					background-color: var(--el-color-success-light-9);
					color: var(--el-color-success);
				}

				&.edit {
					background-color: var(--el-color-warning-light-9);
					color: var(--el-color-warning);
				}

				&.dispatch {
					background-color: var(--el-color-primary-light-9);
					color: var(--el-color-primary);
				}

				&.accept,
				&.pickup,
				&.transport {
					background-color: var(--el-color-primary-light-9);
					color: var(--el-color-primary);
				}

				&.sign,
				&.complete {
					background-color: var(--el-color-success-light-9);
					color: var(--el-color-success);
				}

				&.delete {
					background-color: var(--el-color-danger-light-9);
					color: var(--el-color-danger);
				}

				&.exception {
					background-color: var(--el-color-danger-light-9);
					color: var(--el-color-danger);
				}
			}

			.log-content {
				flex: 1;

				.log-header {
					margin-bottom: 8px;

					.operator {
						font-weight: 500;
						color: var(--el-text-color-primary);
						margin-right: 12px;
					}

					.time {
						color: var(--el-text-color-secondary);
						font-size: 13px;
					}
				}

				.log-desc {
					color: var(--el-text-color-primary);
					line-height: 1.5;
				}

				.log-remark {
					margin-top: 8px;
					color: var(--el-text-color-secondary);
					font-size: 13px;
				}
			}
		}
	}
}

.drawer-footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 16px;
}
</style>
